<template>
  <div class="shoppingList">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <van-tabs v-model:active="active" @click-tab="changeCategoryList($event)" type="card" color="rgb(46,53,72)">
              <van-tab title="进行中"></van-tab>
              <van-tab title="已暂停"></van-tab>
              <van-tab title="已购清单"></van-tab>
            </van-tabs>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 购物清单列表 -->
      <div class="shoppingList-list" v-for="(shoppingList, index) in shoppingListTotal" :key="index">
        <div class="shoppingList-item panel" :text="index" v-for="shoppingListItem in shoppingList" :key="shoppingListItem.id" 
          v-if="index == changeTab" @click="toShoppingListItemDetail()">
          <div class="shoppingList-item-t">
            <div class="shoppingList-item-title">
              <div class="panel-title-icon"></div>
              {{shoppingListItem.shoppingListTitle}}
            </div>
            <div class="shoppingList-item-edit">编辑</div>
          </div>
          <div class="shoppingList-item-c">
            <div class="shoppingList-item-info">
              <div class="shoppingList-item-emoji shoppingList-icon">{{ shoppingListItem.icon }}</div>
              <div class="shoppingList-item-name">
                <div class="text">{{ shoppingListItem.shoppingTitle }}</div>
                <div class="model">{{ shoppingListItem.shoppingNotes }}</div>
              </div>
            </div>
            <div class="shoppingList-item-count">
              <div class="shoppingList-item-count-total">￥{{shoppingListItem.totalMoney}}</div>
              <div class="shoppingList-item-count-ed">{{shoppingListItem.totalNum}}/{{shoppingListItem.purchasedNum}}件</div>
            </div>
          </div>
          <div class="shoppingList-item-b">
            <div class="shoppingList-item-rule rule-active">预购{{shoppingListItem.startTime}}开始</div>
            <div class="shoppingList-item-rule">预购{{shoppingListItem.stopTime}}结束</div>
          </div>
        </div>
      </div>
      <div class="nothing" v-if="false">
        <Nothing :tag="nothingTag" />
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="main-b">
      <div class="fixedBtn" @click="addShoppingList()">添加</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ShoppingList">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

let active = ref()
let changeTab = ref(0)

let nothingTag = ref("没有发现购物清单哦，试着添加一个~")
const router = useRouter()

// 购物清单列表
let shoppingListTotal = reactive([
  [
    {
      id: 'ouvoaajg01',
      shoppingListTitle: '可以尝试添加一个待购清单👀~',
      shoppingTitle:'谷子',
      shoppingNotes: '测试',
      icon: '🤓',
      totalMoney: '200.00',
      purchasedNum: 0,
      totalNum: 0,
      startTime: '2025-02-06 12:57',
      stopTime: '2025-02-06 12:57'
    }
  ],[
    {
      id: 'ouvoaajg01',
      shoppingListTitle: '可以尝试添加一个待购清单👀~',
      shoppingTitle:'谷子',
      shoppingNotes: '暂停',
      icon: '🙄',
      totalMoney: '100.00',
      purchasedNum: 0,
      totalNum: 0,
      startTime: '2025-02-06 12:57',
      stopTime: '2025-02-06 12:57'
    }
  ],[
    {
      id: 'ouvoaajg01',
      shoppingListTitle: '完成',
      shoppingTitle:'谷子',
      shoppingNotes: '-',
      icon: '👻',
      totalMoney: '300.00',
      purchasedNum: 1,
      totalNum: 1,
      startTime: '2025-01-23 12:57',
      stopTime: '2025-01-23 12:57'
    }
  ],
])

// 返回上一级
function back() {
  router.go(-1)
}

// 分页
function changeCategoryList(value: any) {
  changeTab.value = value.name
  console.log(value)
}

// 添加购物清单
function addShoppingList(){
  router.push("./addshoppingList")
  console.log('添加购物清单')
}

// 购物清单详情
function toShoppingListItemDetail(){
  router.push('./shoppingListDetail')
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);

.shoppingList{
  position: relative;
  height: 100vh;
  width: 100%;
}

.main-c{
  margin: @gabelMargin;
  height: 70vh;

  .shoppingList-list {
    font-size: 33px;

    .shoppingList-item {
      .shoppingList-item-t {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .shoppingList-item-title {
          display: flex;
          align-items: center;
        }

        .shoppingList-item-edit {
          background-color: rgb(234, 234, 234);
          color: @garyFontColor;
          padding: 10px;
          font-size: 23px;
          border-radius: 20px;
        }
      }

      .shoppingList-item-c {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15px 0;

        .shoppingList-item-info{
          display: flex;
          align-items: center;
        }

        .shoppingList-item-emoji {
        }

        .shoppingList-item-name {
          .model {
            color: #343434;
            font-size: 25px;
          }
        }

        .shoppingList-item-count {
          text-align: right;
          .shoppingList-item-count-ed{
            font-size: 22px;
            color: @garyFontColor;
          }
        }
      }

      .shoppingList-item-b{
        display: flex;
        font-size: 25px;
        color: @garyFontColor;

        .shoppingList-item-rule{
          padding: 1px 6px;
          margin-right: 10px;
          border: 1px solid rgb(169, 169, 169);
          border-radius: 12px;
        }

        .rule-active{
          color: #343434;
          background-color: @gabelBgColor;
        }
      }
    }
  }
}
</style>